<template>
	<div class="header">
		<!--头部-->
		<div class="head">
			<div class="xinxi" @click="Toggle()"><img src="../assets/xinxi.png"/></div>
			<div class="logo">
				<div class="logo_img">
					<img src="../assets/wap_logo.png"/>
				</div>
				<i class="iconfont icon-39"></i>
			</div>
			<div class="search" @click="searchShow()"><img src="../assets/fangdajing.png"/></div>
		</div>
	  	<!--导航栏-->
	  	<div class="Nav_box">
		<div class="top_menu_more" @click="transform_show()">
			+
			<div class="more_shadow"></div>
		</div>
		<ul class="nav">
			<li v-for="(item,index) in this.$store.state.list" @click="tab(item,index)" :class="{active:item.e_name==get}">{{item.name}}</li>
		</ul>
	</div>
		<!--遮罩层-->
		<div class="shadow" v-show="ok">
	  		<div class="popup">
	  			<div class="banner"></div>
	  			<p>已加载好您感兴趣的头条</p>
	  			<div class="downBtn">立即打开</div>
	  			<div class="close" @click="Toggle()"></div>
	  		</div>
	  	</div>
  		<!--导航栏动态添加-->
  		<div :class="{channel:is,move:not}">
  			<div class="channel_title">
  				<span class="quit" @click="transform_show()"><a></a></span>
  				<span class="bannel_name">频道管理</span>
  			</div>
  			<div class="addBtn">
  				<span class="Btn_title">
  					点击删除以下频道
  				</span>
  				<ul class="Btn_detail" @click="clickRed($event)">
  					<li v-for="(item,index) in $store.state.list" class="Btn_list"><a>{{item.name}}</a></li>
  				</ul>
  			</div>
  			<div class="addBtn">
  				<span class="Btn_title" v-if="$store.state.add_list.length>4">
  					点击添加以下频道
  				</span>
  				<span class="Btn_title warn" v-else>
  					最多16个频道，请先删除一些
  				</span>
  				<ul class="Btn_detail" @click="clickAdd($event)">
  					<li v-for="(item,index) in $store.state.add_list" class="Btn_list"><a>{{item.name}}</a></li>
  				</ul>
  			</div>
  		</div>
		<!--搜索页-->
		<div :class="{search1:is,move:search_show}">
			<div class="search_title">
				<span class="quit" @click="searchShow()"><a></a></span>
				<span class="search_name">
					搜索
				</span>
			</div>
			<form action="get" method="post" class="search_form">
				<div class="search_box">
					<a href="#" class="action_toutiao"></a>
				<input type="search" placeholder="请输入搜索关键词" class="search_input" />
				</div>
			</form>
				<div class="search_content">
					<div class="hot_words">
						<ul class="hotWords_list">
							<li v-for="item in searchList"><a href="#">{{item.title}}</a></li>
						</ul>
					</div>
				</div>
		</div>
	</div>
</template>

<script>
import axois from 'axios';
export default{
	data(){
		return {
			ok:false,
			is:true,
			not:false,
			search_show:false,
			num:this.$route.query.id,
			active:'active',
			searchList:[]
		}
	},
	computed:{
			get:function(){
					return this.$route.query.name
			},set:function(){
				
			}
		},
	methods:{
		search(){
			axois({
					methods:'get',
					url:"search",
				}).then((res)=>{
					this.searchList = res.data.data;
				})
		},
		Toggle(){
			this.ok=!this.ok
			
		},
		transform_show(){
			this.not = !this.not
		},
		searchShow(){
			this.search_show = !this.search_show
		},
		tab(item,index){
			this.$store.commit('recover')
			document.scrollingElement.scrollTop=0
			this.$router.push({
				name:'recommend',
				query:{
					name:item.e_name,
					id:item.num
				}
			})
			var c_url = this.$route.query.name
			this.$store.commit('first_init',{
					url:c_url
				})
		},
		clickRed(e){
			var that = this;
			var navList = this.$store.state.list
			if(e.target.nodeName.toLocaleLowerCase()=="a"&&e.target.innerText!="推荐"){
				navList.forEach(function(el,index){
					if(el.name==e.target.innerText){
						if(el.e_name==that.$route.query.name){
							that.name = "recommend"
//							console.log(that.name)
							that.$router.push({
								name:that.name,
								query:{
									name:"message",
									id:0,
								}
							})
							that.$store.commit('first_init',{
								url:"message",
							})
						}
						that.$store.state.add_list.push(navList[index])
						that.$store.state.list.splice(index,1)
						localStorage.setItem("navList",JSON.stringify(navList))
						localStorage.setItem("add_navList",JSON.stringify(that.$store.state.add_list))
					}
				})
			}
		},
		clickAdd(e){
			var that = this;
			var add_navList = this.$store.state.add_list;
			add_navList.forEach(function(el,index){
				if(el.name==e.target.innerText){
					if(add_navList.length>4){
						that.$store.state.list.push(add_navList[index])
						that.$store.state.add_list.splice(index,1)
						localStorage.setItem("add_navList",JSON.stringify(add_navList))
						localStorage.setItem("navList",JSON.stringify(that.$store.state.list))
					}
				}
			})
		}
	},
	mounted(){
		this.search();
		this.$store.commit('has')
		if(this.$route.path=="/"){
			this.$router.push({
				name:'recommend',
				query:{
					name:'message',
					id:0
				}
			});
			this.$store.commit('first_init',{
					url:"/message"
				})
			this.num = 0
			}else{
				var l_url = this.$route.query.name;
				this.$store.commit('first_init',{
					url:l_url
				})
			}
	},
}
</script>

<style lang="scss">
	@import "~@/assets/common/scss/header";
</style>